<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SJTUMailingList-Home</title>
<link rel="stylesheet" href="../static/css/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="../static/css/print.css" type="text/css" media="print">
<!--[if IE]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" />
  <![endif]-->
<link rel="stylesheet" href="../static/css/home_style.css" type="text/css" media="screen, projection">


<script type="text/javascript" src="../static/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../static/js/home.js"></script>

</head>
<body class="">
<div class="main">
    <div class="sidepanel"> <img src="../static/images/Logo.png" height="136" width="167" />
        <div>
            <ul class="mail-edit">
                <li><a id="allmail">All Mail</a></li>
                <li><a id="draft">Draft</a></li>
                <li><a id="trash">Trash</a></li>
                <li id="mcompose">
                    <input type="button" name="Compose" value="Compose a mail"/>
                </li>
            </ul>
        </div>
        <hr />
        <div class="gList">
            <h2>-GroupList-</h2>
            <ul id="mailgroup" >
                <li id="groupNum"><a href="#" id="groupName">Group1</a></li>
            </ul>
        </div>
        <p> </p>
    </div>
    <div class="headpanel">
        <div class="subheadpanel">
            <div class="navigation">
                <ul id="navigation">
                    <li class="active"><a id="homepage" href="#">Home</a></li>
                    <li> <a id="manage" href="#" title="">Manage</a></li>
                    <li><a id="settings" href="#" title="">Settings</a></li>
                    <li><a href="#" title=""></a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="userinfo">
        <ul class="account">
            <li>%User's Account%</li>
            <li id="logout"><a href="" title="">Logout</a></li>
        </ul>
    </div>
</div>
<div class="mainpanel container">
    <div class="sectionPanel infoboard" style="display:block">
        <div class="token span-26 container">
            <div class="unread prefix-7 span-3">
                <p id="unread">*</p>
            </div>
            <div class="tips prefix-11 span-1">
                <p id="tips">!</p>
            </div>
        </div>
        <div class="infocol1">
            <div class="news" style="width:500px;">
				<h2>New >>>></h2>
                <ul class="listB" id="newMail" style="width:490px;">
                    <li class="active">
                        <h3><a href="#">Message Title</a></h3>
                        <span>9:05 AM</span>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    </li>
                    <li>
                        <h3><a id="title" href="#">Message Title</a></h3>
                        <span id="time">9:05 AM</span>
                        <p id="contentDigest">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    </li>
                    <li>
                        <h3><a id="title" href="#">Message Title</a></h3>
                        <span id="time">9:05 AM</span>
                        <p id="contentDigest">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    </li>
                    <li>
                        <h3><a id="title" href="#">Message Title</a></h3>
                        <span id="time">9:05 AM</span>
                        <p id="contentDigest">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="infocol2">
            <div class="reminder" id="reminder" style="500px">
			 <h2>Reminder >>>></h2>
                <textarea id="mcontent" style="width:490px; height:500px"></textarea>				
				
				<!-- <ul class="listB" style="width:490px;">
                    <li class="active">
                        <h3><a href="#">Message Title</a></h3>
                        <span>9:05 AM</span>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    </li>
                    <li>
                        <h3><a href="#">Message Title</a></h3>
                        <span>9:05 AM</span>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    </li>
                    <li>
                        <h3><a href="#">Message Title</a></h3>
                        <span>9:05 AM</span>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    </li>
                    <li>
                        <h3><a href="#">Message Title</a></h3>
                        <span>9:05 AM</span>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                    </li>
                </ul> -->
            </div>
        </div>
    </div>
    <div class="sectionPanel home" style="width:1080px; display:none;">
        <div class="col2 span-8"><!-- start col2 -->
            <ul class="listB" style="width:285px;">
                <li class="active">
                    <h3><a href="#">Message Title</a></h3>
                    <span>9:05 AM</span>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                </li>
                <li>
                    <h3><a href="#">Message Title</a></h3>
                    <span>9:05 AM</span>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                </li>
                <li>
                    <h3><a href="#">Message Title</a></h3>
                    <span>9:05 AM</span>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                </li>
                <li>
                    <h3><a href="#">Message Title</a></h3>
                    <span>9:05 AM</span>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                </li>
                <li>
                    <h3><a href="#">Message Title</a></h3>
                    <span>9:05 AM</span>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                </li>
                <li>
                    <h3><a href="#">Message Title</a></h3>
                    <span>9:05 AM</span>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                </li>
                <li>
                    <h3><a href="#">Message Title</a></h3>
                    <span>9:05 AM</span>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                </li>
                <li>
                    <h3><a href="#">Message Title</a></h3>
                    <span>9:05 AM</span>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                </li>
                <li>
                    <h3><a href="#">Message Title</a></h3>
                    <span>9:05 AM</span>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                </li>
            </ul>
        </div>
        <!-- end col2 -->
        
        <div class="col3 span-19"><!-- start col3 -->
            <div class="mailbox"> 
                <!-- The Page -->
                <div class="page">
                    <div id="airmail-line" class="span-18"> <b>/</b> <i>/</i> <b>/</b> <i>/</i> <b>/</b> <i>/</i> <b>/</b> <i>/</i> <b>/</b> <i>/</i> <b>/</b> <i>/</i> <b>/</b> <i>/</i> <b>/</b> <i>/</i> <b>/</b> <i>/</i> <b>/</b> <i>/</i> <b>/</b> <i>/</i> <b>/</b> <i>/</i> <b>/</b> <i>/</i> <b>/</b> <i>/</i> <b>/</b> <i>/</i> <b>/</b> <i>/</i> </div>
					<div id="mail-content">
						<div class="prefix-15" id="mailRemove"><a href="#"> x </a></div>
						<div style="">
							<h1>jmailing-list Publish</h1>
							<p>Hi there!</p>
							
							<!-- Body -->
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						</div>
					</div>
                    <!-- end mail content --> 
                </div>
                <!-- end .page --> 
            </div>
            <!-- end .mailbox --> 
        </div>
        <!-- end col3 --> 
        
    </div>
    <div class="sectionPanel mcompose span-26">
        <div class="mailopt span-20">
            <ul>
                <li>
                    <button  name="send" id="mailsend">Send</button>
                </li>
                <li>
                    <button name="draft">Save as draft</button>
                </li>
                <li>
                    <button id="bdiscard" name="discard">Discard</button>
                </li>
            </ul>
        </div>
        <div class="compose span-24">
            <div class="">
                <table class="editmail span-24">
                    <tr>
                        <td class="mf1">From:</td>
                        <td class="mfinput"><select id="sender" class="mfaccount" style="width:500px" tabindex="1">
                                <option value="wh.sjtu@gmail.com" selected="selected">Brian Ong (wh.sjtu@gmail.com) </option>
                                <option value="chapter_wh@hotmail.com">Brian Ong (chapter_wh@hotmail.com) </option>
                            </select></td>
                    </tr>
                    <tr>
                        <td class="mt1"><a href="#">To</a></td>
                        <td class="mtinput"><input id="recipient" type="text" value="who do you want to write to?" style="width:850px;height:40px"  /></td>
                    </tr>
                    <tr>
                        <td class="ms1">Subject</td>
                        <td><input type="text" name="" id="subject" style="width:850px" /></td>
                    </tr>
                    <tr>
                        <td class="mehead" style="width:2px"></td>
                        <td id="mearea"><textarea id="mcontent" style="width:850px; height:300px"></textarea></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div class="sectionPanel mmanage span-26" style="display:none;">
        <div class="mcontrol span-26">
            <div class="concol1 span-5">
                <h2>Manage</h2>
				<ul class="collist1">       
                    <li class="active">
                        <h3 id="manSplite">
							<a id="manGroups" href="#">Groups</a>
							<a id="addGroup" href="#">+</a>
						</h3>
                    </li>
                    <li>
                        <h3>
							<a id="manContacts" href="#">Contacts</a>
						</h3>
                    </li>
                </ul>
            </div>
        </div>
		<div class="management">
			<div class="addGroup manaPanel" style="display:none;">
				<div class="concol2 span-7">
					<h2>New Groups</h2>
					<ul class="collist2">
						<li class="active">
							<p>Group Name: <input id="groupName" type="text" /></p>
							<p>Group Topic: <input id="groupTopic" type="text" /></p>
							<p>Group Policy: <input id="groupPolicy" type="text" /></p>
						</li>
						<li>
							<input type="button" id="addGroupConfirm" name="Compose" value="OK"/>
						</li>
					</ul>
				</div>
			</div>
			<div class="groupsPanel manaPanel" style="display:none;">
				<div class="concol2 span-6">
					<h2>Groups</h2>
					<ul class="collist2">
						<li class="active">
							<h3><a href="#">Group 1</a></h3>
							<span>Owner</span>
							<p>Current Topic</p>
						</li>
						<li>
							<h3><a href="#">Group 2</a></h3>
							<span>Owner</span>
							<p>Current Topic</p>
						</li>
					</ul>
				</div>
				<div class="concol3 span-12">
					<h2>Contacts</h2>
					<ul class="collist3" style="display:none;">						
						<li class="active">
							<h3><a id="contactName" href="#">User 1</a></h3>
							<span id="manAdress">(wh.sjtu@gmail.com)</span>
							<p>Current Topic</p>
						</li>
						<li>
							<h3><a id="contactName" href="#">User 2</a></h3>
							<span id="manAdress">()</span>
							<p>Current Topic</p>
						</li>
						<li>
							<h3><a id="contactName" href="#">User 3</a></h3>
							<span id="manAdress">()</span>
							<p>Current Topic</p>
						</li>
						<li>
							<h3><a id="contactName" href="#">User 4</a></h3>
							<span id="manAdress">()</span>
							<p>Current Topic</p>
						</li>
					</ul>
				</div>
			</div>
			<div class="contactsPanel manaPanel" style="display:none;">
				<div class="concol3 span-12">
					<h2>Contacts</h2>
					<ul class="collist3">						
						<li class="active">
							<h3><a id="contactName" href="#">User 1</a></h3>
							<span id="manAdress">(wh.sjtu@gmail.com)</span>
							<p>Current Topic</p>
						</li>
						<li>
							<h3><a id="contactName" href="#">User 2</a></h3>
							<span id="manAdress">()</span>
							<p>Current Topic</p>
						</li>
						<li>
							<h3><a id="contactName" href="#">User 3</a></h3>
							<span id="manAdress">()</span>
							<p>Current Topic</p>
						</li>
						<li>
							<h3><a id="contactName" href="#">User 4</a></h3>
							<span id="manAdress">()</span>
							<p>Current Topic</p>
						</li>
					</ul>
				</div>
			</div>
		</div>
    </div>
</div>
<div class="footer span-24" style="position:absolute;bottom:0;left:0;"> 
	<p>copyright(c)2010</p>
	<p>Homepage: <a href="http://code.google.com/p/jmailing-list/">Jmailing-list</a></p>
</div><!-- end footer --> 

</body>
</html>
